<template>
  <div>
    <h3>各级各类体校调查统计表</h3>
    <div class="container">
      <vxe-toolbar>
        <template #buttons>
          <el-row type="flex" :gutter="10">
            <el-col :span="4">
              <vxe-input
                style="float: left;"
                v-model.trim.lazy="filterName"
                type="search"
                placeholder="快捷检索"
                @input="searchEvent"
              ></vxe-input>
            </el-col>
            <el-col :span="4" style="margin-left: 40px;">
              <el-button type="success" size="medium" @click="handleCodeAdd">
                生成调查表二维码</el-button
              >
            </el-col>
          </el-row>
        </template>
      </vxe-toolbar>
      <vxe-table
        resizable
        ref="XTable"
        show-overflow
        border
        max-height="800"
        stripe
        highlight-hover-row
        highlight-current-row
        resizable
        :loading="loading"
        :data="dataList"
        @sort-change="sortChange"
      >
        <vxe-table-column field="time" title="时间" sortable></vxe-table-column>
        <vxe-table-column field="name" title="学校" sortable></vxe-table-column>
        <vxe-table-column field="" title="操作" width="110">
          <template #default="{ row,rowIndex }">
            <el-button
              @click="examine(row, rowIndex)"
              type="success"
              size="medium"
              icon="el-icon-edit"
              circle
            ></el-button>
          </template>
        </vxe-table-column>
      </vxe-table>
      <vxe-pager
        :loading="loading"
        :current-page="page.currentPage"
        :page-size="page.pageSize"
        :total="page.totalResult"
        :layouts="[
          'PrevPage',
          'JumpNumber',
          'NextPage',
          'FullJump',
          'Sizes',
          'Total'
        ]"
        @page-change="handlePageChange"
      >
      </vxe-pager>
    </div>
    <vxe-modal
      show-zoom
      v-model="insertModal"
      width="90%"
      height="1000px"
      title="全国各级各类体校调查统计表"
    >
      <SportsSchoolQuestionnaire></SportsSchoolQuestionnaire>
    </vxe-modal>

    <vxe-modal
      title="全国各级各类体校调查统计表"
      v-model="codeOpen"
      width="50%"
      append-to-body
    >
      <div>
        <div ref="qrCodeUrl"></div>
        <vue-qr
          ref="qrcode"
          :text="codeText"
          :size="500"
          colorDark="#000000"
        ></vue-qr>
      </div>
      <el-button type="primary" @click="download">下载</el-button>
    </vxe-modal>
  </div>
</template>

<script>
import VueQr from "vue-qr";
import SportsSchoolQuestionnaire from "./components/SportsSchoolQuestionnaire1.vue";
export default {
  components: {
    SportsSchoolQuestionnaire,
    VueQr
  },
  data() {
    return {
      defaultDataList: [],
      dataList: [
        {
          time: "2021-12-23",
          name: "北京大学"
        },
        {
          time: "2022-06-12",
          name: "清华大学"
        }
      ],
      page: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 0
      },
      loading: false,
      filterName: "",
      insertModal: false,
      codeOpen: false,
      search: false,
      codeText: "",
      qrcode: "",
      qrCodeUrl: ""
    };
  },
  created() {
    this.getGroundAll();
  },
  watch: {
    filterName(val) {
      if (!val) {
        this.page = {
          currentPage: 1,
          pageSize: 10,
          totalResult: 0
        };
        this.search = false;
        this.findList();
      }
    }
  },
  methods: {
    //生成二维码
    handleCodeAdd() {
      this.codeOpen = true;
      this.codeText =
        window.location.origin + "/#/statistics/SportsSchoolQuestionnaire1";
      console.log(this.codeText);
    },

    //下载二维码
    async download() {
      const a = document.createElement("a");
      a.download = "二维码";
      a.href = this.$refs.qrcode.imgUrl;
      a.click();
    },

    //查看提交的表单
    examine(row, rowIndex) {
      this.insertModal = true;
    },

    //数据
    getGroundAll() {
      this.defaultDataList = this.dataList;
      this.searchProps = Object.keys(this.dataList[0]);
      this.findList();
    },

    //快捷搜索
    searchEvent() {
      const filterName = this.$XEUtils
        .toValueString(this.filterName)
        .trim()
        .toLowerCase();
      if (filterName) {
        const filterRE = filterName;
        const searchProps = this.searchProps;
        const rest = this.defaultDataList.filter(item =>
          searchProps.some(
            key =>
              this.$XEUtils
                .toValueString(item[key])
                .toLowerCase()
                .indexOf(filterName) > -1
          )
        );
        this.dataList = rest.map(row => {
          const item = Object.assign({}, row);
          searchProps.forEach(key => {
            item[key] = this.$XEUtils
              .toValueString(item[key])
              .replace(filterRE, match => match);
          });
          return item;
        });
        this.page = {
          currentPage: 1,
          pageSize: this.dataList.length,
          totalResult: this.dataList.length
        };
        this.search = true;
      } else {
        this.dataList = this.defaultDataList;
      }
    },
    handlePageChange({ currentPage, pageSize }) {
      this.page.currentPage = currentPage;
      this.page.pageSize = pageSize;
      this.findList();
    },
    sortChange() {
      if (!this.search) {
        this.page.currentPage = 1;
        this.page.pageSize = this.defaultDataList.length;
        this.findList();
      } else {
        this.page.pageSize = this.dataList.length;
      }
    },
    findList() {
      this.loading = true;
      setTimeout(() => {
        this.page.totalResult = this.defaultDataList.length;
        this.dataList = this.defaultDataList.slice(
          (this.page.currentPage - 1) * this.page.pageSize,
          this.page.currentPage * this.page.pageSize
        );
        this.loading = false;
      }, 300);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #ffffff;
  padding: 10px;
}
</style>
